<!--
*@Author: zt
*@Description: 论坛详情
*@Date: 2025-03-12
-->
<template>
  <a-drawer
    :title="title"
    :placement="placement"
    :closable="false"
    :open="props.open"
    width="1200"
    @close="onClose"
  >
    <template #extra>
      <u-icon-font :type="enmuList.iconList.th" @click="onClose" />
    </template>
    <div class="box-style">
      <div class="box-header-style">
        <div class="header-style">
          <div class="user-contain-style">
            <div class="header-contain-style">
              {{ form.userName.charAt(0) }}
            </div>
            <div class="header-user-style">{{ form.userName }}</div>
          </div>
          <div class="header-time-style">发布于：{{ form.createtime }}</div>
        </div>

        <div class="contain-style">
          <h2>{{ form.title }}</h2>
          <p v-html="form.content"></p>
          <u-form :elements="formEls" :model="form"></u-form>
        </div>

        <div class="pl-style">
          <div class="pl-title">
            <span class="pl-title-text">
              评论 （{{ form.commentsCount }}条）
            </span>
          </div>
          <div class="pl-user-style">
            <div
              class="pl-user-contain-style"
              v-if="title == '论坛详情'"
              v-for="(list, index) in form.fcommentsList"
              :key="index"
            >
              <Comment
                :userName="list.userName"
                :content="list.content"
                :createtime="list.createtime"
                :childCount="list.childCount"
                :postId="list.postId"
                :keyid="list.keyid"
                :createuserid="list.createuserid"
                :children="list.children"
                @itemClick="commentClick"
                @deleteItem="commentDelete"
                @clickMore="commentMore"
              ></Comment>
            </div>

            <div
              v-if="title != '论坛详情'"
              class="pl-user-contain-style"
              v-for="(list, index) in form.fcommentsList"
              :key="index"
            >
              <UnreadComment
                :userName="list.userName"
                :fkUserName="list.fkUserName"
                :content="list.content"
                :createtime="list.createtime"
                :childCount="list.childCount"
                :postId="list.postId"
                :keyid="list.keyid"
                :createuserid="list.createuserid"
                :children="list.children"
                @itemClick="commentClick"
                @deleteItem="commentDelete"
                @clickMore="commentMore"
              ></UnreadComment>
            </div>
          </div>
        </div>
      </div>

      <div class="textarr-style">
        <div class="content-style">
          <a-textarea
            v-model:value="plForm.content"
            :bordered="false"
            :autoSize="{ minRows: 1, maxRows: 2 }"
            :placeholder="plForm.placeholder"
            @pressEnter="fbSubmit"
          />
        </div>
        <div class="function-style">
          <div class="radio-style">
            <a-checkbox v-model:checked="plForm.userStatus1">匿名</a-checkbox>
          </div>
          <div class="submit-style">
            <a-button type="primary" :size="'small'" @click="fbSubmit">
              <span class="submit-text-style">{{ plText }}</span>
            </a-button>
          </div>
          <div class="close-style">
            <a-button :size="'small'" @click="fbclose">
              <span class="close-text-style">{{ '取消' }}</span>
            </a-button>
          </div>
        </div>
      </div>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, onMounted, watch, reactive } from 'vue';
import type { DrawerProps, FormItemProps } from 'ant-design-vue';
import { messageC, alertC, setArray } from '@/util/common';
import { _IExtra, _IFormEl } from '@/components/common/form/interface';
import Comment from './Comment.vue';
import UnreadComment from './UnreadComment.vue';

import * as ForumAPI from '@/service/assist/forum/index';
import * as ENMULIST from './Enmu';

const props = defineProps<{
  open?: boolean;
  title: string;
  keyid: string;
}>();

// 抽屉靠边方向
const placement = ref<DrawerProps['placement']>('right');

const emits = defineEmits(['close']);

// 枚举集合
const enmuList = ref(ENMULIST);

const formItemProps: FormItemProps & _IExtra = {
  labelWidth: '90px',
  colon: false,
};
const formEls: Array<_IFormEl> = reactive([
  {
    key: 'fpostsattachList',
    col: { span: 24 },
    element: 'file',
    formItemProps: { ...formItemProps },
    componentProps: {
      disabled: true,
      fileParams: { biztype: '2', bucket: 'FORUM' },
    },
  },
]);

//当时点击评论数据
const valkey = ref<any>();

//标题
const title = ref(props.title);

const form = ref({
  content: '', //帖子内容
  createtime: '', //帖子创建时间
  userName: '', //发帖用户名
  fpostsattachList: [], //帖子附件
  userStatus: 0, //是否是匿名发帖
  title: '', //帖子标题
  fcommentsList: [], //一级评论数据
  commentsCount: 0, //评论总数量
});

// 评论发表文字
const plText = ref('发表');

//评论表单
const plForm = ref({
  content: '', //评论内容
  userStatus1: false, //评论状态
  userStatus: 0, //评论状态-传递
  postId: props.keyid, //帖子id
  parentId: 0, //父评论id
  fkUserName: '', //对方用户名
  fkuserid: '',
  placeholder: '说点什么呗~', //文本框提示文字
});

// 初始数据
const orginPlForm = () => {
  plText.value = '发表';
  plForm.value.parentId = 0;
  plForm.value.userStatus = 0; //评论状态-传递
  plForm.value.content = ''; //评论内容
  plForm.value.fkUserName = '';
  plForm.value.fkuserid = '';
  plForm.value.userStatus1 = false; //评论状态
  plForm.value.postId = props.keyid;
  plForm.value.placeholder = '说点什么呗~';
};

// 详情数据回显
const getSerach = async () => {
  const res = await ForumAPI.getInfo(props.keyid);
  if (res.code == 0) {
    form.value = res.data;
    if (!form.value.commentsCount) {
      form.value.commentsCount = 0;
    }
    form.value.fcommentsList.forEach(item => {
      if (!item.children) {
        item.children = [];
      }
    });
  } else {
    messageC(res.msg, 'error');
  }
};

// 详情数据回显--未读
const getSerach1 = async () => {
  const res = await ForumAPI.queryNumbers(
    props.keyid,
    title.value == '未读' ? '1' : '0'
  );
  if (res.code == 0) {
    form.value = res.data;
    if (!form.value.commentsCount) {
      form.value.commentsCount = 0;
    }
    form.value.fcommentsList.forEach(item => {
      if (!item.children) {
        item.children = [];
      }
    });
    messageC(res.msg, 'success');
  } else {
    messageC(res.msg, 'error');
  }
};

// 点击更多
const commentMore = async (val, len) => {
  valkey.value = val;
  let current;
  // 判断是否是第一次点击
  len == 0 ? (current = 1) : (current = len / 10 + 1);
  const res = await ForumAPI.getPageMore({
    current: current,
    model: { keyid: val.keyid },
    size: 10,
  });
  if (res.code == 0) {
    form.value.fcommentsList.map(item => {
      if (item.keyid == val.keyid) {
        item.children = item.children.concat(res.data.records);
        item.children = setArray(item.children, 'keyid');
      }
    });
  } else {
    messageC(res.msg, 'error');
  }
};

// 点击回复评论事件
const commentClick = val => {
  valkey.value = val;
  plText.value = '回复';
  plForm.value.parentId = val.keyid;
  plForm.value.fkUserName = val.userName;
  plForm.value.fkuserid = val.createuserid;
  plForm.value.placeholder = `回复@${val.userName}`;
};

//点击删除评论事件
const commentDelete = async (val, nval) => {
  const res = await ForumAPI.delpl({ ids: val });
  if (res.code == 0) {
    getSerach();
  } else {
    messageC(res.msg, 'error');
  }
};

//发表评论新增
const fbSubmit = async () => {
  if (plForm.value.content == '') {
    messageC('评论发表或回复需要有评论内容');
    return;
  }
  const res = await ForumAPI.fComments(plForm.value);
  if (res.code == 0) {
    if (plText.value == '回复') {
      form.value.fcommentsList.map(item => {
        //匹配一级评论
        if (item.keyid == res.data.topId) {
          item.children.push(res.data);
        }
      });
      form.value.commentsCount++;
      orginPlForm();
      messageC('评论成功', 'success');
    } else {
      orginPlForm();
      getSerach();
      messageC('评论成功', 'success');
    }
  } else {
    messageC(res.msg, 'error');
  }
};

// 取消操作
const fbclose = () => {
  orginPlForm();
};

// 详情关闭事件
const onClose = () => {
  orginPlForm();
  emits('close', false);
};

// 弹窗打开监听
watch(
  () => props.open,
  () => {
    if (props.open) {
      if (props.keyid) {
        plForm.value.postId = props.keyid;
        if (props.title == '论坛详情') {
          getSerach();
        } else {
          getSerach1();
        }
      }
    }
  }
);

//监听传入标题进行赋值
watch(
  () => props.title,
  newVal => {
    title.value = props.title;
  }
);

//匿名状态监听变换
watch(
  () => plForm.value.userStatus1,
  () => {
    if (plForm.value.userStatus1) {
      plForm.value.userStatus = 1;
    } else {
      plForm.value.userStatus = 0;
    }
  }
);
</script>

<style lang="scss" scoped>
:deep(table) {
  border: 1px solid !important;
}
:deep(tr) {
  border: 1px solid !important;
}
:deep(th) {
  border: 1px solid !important;
}
:deep(td) {
  border: 1px solid !important;
}
.box-style {
  position: relative;
  box-sizing: border-box;

  height: calc(100vh - 110px);
  .box-header-style {
    height: calc(100vh - 240px);
    overflow-x: hidden;
    overflow-y: auto;
    .header-style {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .user-contain-style {
        min-width: 200px;
        display: flex;
        align-items: center;
        .header-contain-style {
          width: 40px;
          height: 40px;
          border-radius: 4px 4px 4px 4px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #1890ff;
          color: #fff;
        }
        .header-user-style {
          margin-left: 15px;
          font-weight: 400;
          font-size: 18px;
          color: #333333;
        }
      }

      .header-time-style {
        font-weight: 400;
        font-size: 14px;
        color: #999999;
        margin-right: 10px;
      }
    }

    .contain-style {
      margin-top: 20px;
      .contain-title-style {
        margin-top: 20px;
        font-weight: 400;
        font-size: 28px;
        color: #333333;
      }
      .contain-content-style {
        margin-top: 15px;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        line-height: 28px;
      }
    }

    .pl-style {
      .pl-title {
        .pl-title-text {
          font-weight: 400;
          font-size: 18px;
          color: #333333;
        }
      }

      .pl-user-style {
        overflow-y: auto;
        .pl-user-contain-style {
          // margin-top: 20px;
        }
      }
    }
  }

  .textarr-style {
    position: absolute;
    width: 100%;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    margin-top: 20px;
    height: 100px;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #cccccc;
    .function-style {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-right: 20px;
      margin-bottom: 10px;
      .radio-style {
        margin-right: 16px;
      }
      .submit-style {
        margin-right: 16px;
        .submit-text-style {
          font-weight: 400;
          font-size: 14px;
        }
      }
      .close-style {
        margin-right: 16px;
        .close-text-style {
          font-weight: 400;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
